<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		.content {
			width: 50%;
			height: 80%;
			margin: 0 auto;
			position: relative;
			top: 240px;
			left: 180px;
		}
		.content .warrper{
			position: absolute;
			
		}
		
		.content .ring1 {
			width: 150px;
			height: 150px;
			border: 5px solid red;
			border-radius: 50%;
			float: left;
		}
		
		.content .ring2 {
			width: 150px;
			height: 150px;
			border: 5px solid yellow;
			border-radius: 50%;
			float: left;
			margin-left: -20px;
		}
		
		.content .ring3 {
			width: 150px;
			height: 150px;
			border: 5px solid blue;
			border-radius: 50%;
			float: left;
			margin-left: -20px;
		}
		
		 .content .warrper2{
		 	position: absolute;
		 	top: 91px;
		 	left: 21px;
		 }
		 .content .warrper2 .ring4{
		 	width: 150px;
			height: 150px;
			border: 5px solid gold;
			border-radius: 50%;
			float: left;
			margin-left: 50px;
		 }
		 .content .warrper2 .ring5{
		 	width: 150px;
			height: 150px;
			border: 5px solid green;
			border-radius: 50%;
			float: left;
			margin-left: -20px;
		 }
		 
	</style>

	<body>

		<div class="content">
			<div class="warrper">
				<div class="ring1"></div>
				<div class="ring2"></div>
				<div class="ring3"></div>
			</div>
			<div class="warrper2">
				<div class="ring4"></div>
				<div class="ring5"></div>
			</div>
		</div>

	</body>

</html>